.lc-map {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  .map-legend {
    position: absolute;
    width: 100%;
    // height: 10%;
    top: 0;
    left: 0;
    text-align: left;
    padding: 0 0 0 10px;
    z-index: 99999;
    .tip-title {
      background: url('../../assets/tip-title.svg') no-repeat;
      background-size: 100% 100%;
    }
    .legend-area {
      margin-bottom: 10px;
      span:first-child {
        color: #5879c7;
      }
      span:nth-child(2) {
        display: inline-block;
        min-width: 30px;
        padding: 0 30px 2px 10px;
        cursor: pointer;
        .loc:hover {
          color: #5879c7;
        }
        i:nth-child(2) {
          cursor: default;
        }
      }
    }
    .legend-tip {
      span:first-child {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('../../assets/stiffwood.svg') no-repeat bottom left;
      }
      span:nth-child(2) {
        vertical-align: middle;
        display: inline-block;
        margin-top: -10px;
        min-width: 100px;
        padding: 0 45px 2px 10px;
        .num {
          color: #ffff00;
        }
      }
    }
  }
  .map-inner {
    height: 100%;
    svg g{
      cursor: pointer;
    }
  }
  .map-tip {
    position: absolute;
    width: 5%;
    height: 150px;
    bottom: 4%;
    left: 2%;
    background: url('../../assets/map-tip.svg') no-repeat 100% 100%;
  }
  .map-line {
    position: absolute;
    width: 119px;
    height: 184px;
    bottom: 2%;
    right: 2%;
    background: url('../../assets/map-line.svg') no-repeat 100% 100%;
  }
}
